<template>
<div>
  <div class="show">
    <p style="margin-left:6%;margin-top: 5%">昵称: <input type="text" v-model="userinfo.username"></p>
    <p style="margin-left:6%;margin-top: 5%">性别:<input type="text" v-model="userinfo.usersex"></p>
    <p style="margin-left:6%;margin-top: 5%">手机号:<input type="text" v-model="userinfo.usertel"></p>
    <p style="margin-left:6%;margin-top: 5%">收货地址:<span style="margin-left: 3%;line-height:40px">{{userinfo. userdress}}</span></p>
  </div>
</div>
</template>

<script>
import emitter from '@/utils/eventbus'
// import { ref } from 'vue'
// 还是等跳转到这里的时候再来加载数据好一点
// import {userinfo} from "../../userinfo/userinfo"
export default {

  name: 'bokeList',
  data () {
    return {
      userinfo: {
        username: 'admin',
        usersex: '女',
        usertel: '1778237871',
        userdress: '重庆市巴南区重庆工程学院'
      }
    }
  },
  // setup () {
  //   const username = ref('admin')
  //   const usersex = ref('女')
  //   const usertel = ref('1778237871')
  //   const userdress = ref('重庆市巴南区重庆工程学院')

  //   // this.$bus.$on(“方法名”,回调函数)
  //   emitter.on('aMsg', (ruleForm) => {
  //     // A发送来的消息
  //     console.log('bus', ruleForm)

  //     username.value = ruleForm.name
  //     usersex.value = ruleForm.sex
  //     usertel.value = ruleForm.tel
  //     userdress.value = ruleForm.city

  //   return {
  //     username, usersex, usertel, userdress
  //   }
  // }
  mounted () {
    // this.$bus.$on(“方法名”,回调函数)
    emitter.on('aMsg', (ruleForm) => {
      // A发送来的消息
      console.log('bus', ruleForm)
      this.userinfo.username = ruleForm.name
      this.userinfo.usersex = ruleForm.sex
      this.userinfo.usertel = ruleForm.tel
      this.userinfo.userdress = ruleForm.city
      console.log('userinfo', this.userinfo)
      // window.localStorage.setItem('ruleForm', ruleForm)
    })
  },
  methods: {

  }
}
</script>

<style scoped>
.show{
  margin: 100px auto;
  width: 80%;
  height: 450px;
  border: 5px solid #d6d989;
  transition: all 0.9s;
  border-radius: 10px;

}

.show:hover{
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
  margin-top: 90px;
}

input{
  margin-left: 3%;
  line-height:40px;
  border:none;
}
</style>
